<template>
    <!-- 机构潜客管理页面 -->
    <div class="mainbody">
        <div style="height: 30px; line-height: 30px;padding-left: 20px;">
              <h1>潜客回收/调配查询</h1>
        </div>
        <div >
            <ui-form  v-model="searchForm" label-width="100px"  class="query-form">
                <ui-form-item label="潜客类型" >
                    <ui-select v-model="searchForm.prowlerType" placeholder="请选择潜客类型">
                        <ui-option :value="0" label="零售"></ui-option>
                        <ui-option :value="1" label="公司"></ui-option>
                    </ui-select>
                </ui-form-item>
                <ui-form-item label="所属机构"  >
                    <ui-select v-model="searchForm.institutionalUnit" placeholder="请选择所属机构">
                        <!-- <ui-option v-for="" :key="" :label="" :value=""></ui-option>       -->
                        <ui-option :value="0" label="零售"></ui-option>
                        <ui-option :value="1" label="公司"></ui-option>
                    </ui-select>
                </ui-form-item>
                <ui-form-item label="客户名称"  >
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerName" > </ui-input>
                </ui-form-item>
                <ui-form-item label="手机号"  >
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.phoneNumber"> </ui-input>
                </ui-form-item>
                <ui-form-item label="证件号码"  >
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerId"  > </ui-input>
                </ui-form-item>
                <ui-form-item label="潜客来源渠道" >
                    <ui-select v-model="searchForm.sourceChannel" placeholder="请选择潜客类型">
                        <ui-option :value="0" label="零售"></ui-option>
                        <ui-option :value="1" label="公司"></ui-option>
                    </ui-select>
                </ui-form-item>
                
                <ui-form-item style="float: right;">
                    <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
                    <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
                </ui-form-item>
                
                            
            </ui-form>
            
            <!-- <ui-button
                class="primary-btn mg-bt-20"
                @click="
                    $router.push({
                    path: '/prowler/prowlermanage/recycle/recycleConfirm',
                    })
                "
                icon="ui-icon-plus"
                >潜客回收</ui-button>

                <ui-button
                class="primary-btn mg-bt-20"
                @click="
                    $router.push({
                    path: '/prowler/prowlermanage/deploy/deployEnter',
                    })
                "
                icon="ui-icon-plus"
                >潜客调配</ui-button>   -->
            
                <div style="height: 50px; border: 1px red solid; line-height: 50px;">
                    <span style="float: left;">
                        客户列表
                    </span>
                    
                    <ui-button
                class="primary-btn mg-bt-20 buttonright"
                @click="
                    $router.push({
                    path: '/prowler/prowlermanage/recycle/recycleConfirm',
                    })
                "
                icon="ui-icon-plus"
                >潜客回收</ui-button>

                <ui-button
                class="primary-btn mg-bt-20 buttonright"
                @click="
                    $router.push({
                    path: '/prowler/prowlermanage/deploy/deployEnter',
                    })
                "
                icon="ui-icon-plus"
                >潜客调配</ui-button> 

                </div>
            

                <div>
                    <vx-table :tableData="tableData" :isSelect="true" :columns="columns" @multipleSelection="multipleSelection"
                    :buttomGroup="buttomGroup" @updataData="updataData"></vx-table>
                </div>
                
                <ui-pagination
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :layout="layout"
                    :page-sizes="pageSizeList"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                >
                </ui-pagination>


                
        </div>



    </div>
</template>
<script>
import pagination from '@/common/mixin/pagination.js'; // 混入分页
import vxTable from '@/components/vx-table';
 export default{
  mixins: [pagination],
  components:{
    vxTable
  },
    data(){
      return{
        searchForm:{
           prowlerType:'',//潜客类型   0零售  1 公司
           institutionalUnit:'',  // 所属机构
           customerName:'',//客户名称
           phoneNumber:'',//手机号
           customerId:'', // 证件号码
           sourceChannel:'', // 潜客来源
        },
        layout:"total, sizes, prev, pager, next, jumper", // 分页顺序
        columns: [
            {
            prop: 'userName',
            label: '客户名称',
            fixed: true,
            width:'120'
            },
            {
            prop: 'updatedBy',
            label: '潜客类型',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '手机号',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '证件类型',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '证件号码',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '潜客来源渠道',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '所属机构',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '管户人',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '登记时间',
            fixed: true
            },
            {
            prop: 'updatedBy',
            label: '转化时间',
            fixed: true
            },
            // {
            // prop: 'createdBy',
            // label: '',
            // fixed: true,
            // formatter: (row, column, cellValue, index) => {
                
            //     return wordcut(cellValue,3,4);
            // }
            // }
         ], //表头


         tableData:[],


        buttomGroup: [
            { label: '删除', methodsName: 'delete' },
           
        ] 


      }
    }
    
 }

</script>
<style  lang="scss" scoped>
    
  ::v-deep .ui-form-item__content{
        height: 40px;
    }
    .buttonright{
        float: right;
        margin-right: 20px;
    }
</style>